<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img :src="imgage" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgage" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgage" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgage" alt="" />
      </van-swipe-item>
    </van-swipe>
    <p>{{ title }}</p>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="join" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detail: [],
      imgage: [], //图片
      title: [], //标题
    };
  },
  mounted() {
    //接受数据
    this.$axios.get("/data.json").then((res) => {
      console.log(res);
      this.detail = res.data.res;
      this.detail.forEach((item) => {
        if (item.productId == this.$route.query.id) {
          this.detail = item;
          this.imgage = item.productImage;
          this.title = item.productName;
        }
      });
    });
  },
  methods: {
    join() {
      localStorage.setItem("detail",JSON.stringify(this.detail));
    },
  },
};
</script>
<style lang="scss">
</style>